<template>
    <!-- 动画效果示例 -->
    <div>
        <button @click="isShow=!isShow">show/hide</button>
        <!-- transition是vue的标签 -->
        <!-- 要写成表达式，appear首次加载时显示动画 -->
        <!-- <transition :appear="true"> -->
        <!-- 可以简写成 -->
        <transition appear>
            <h1 v-show='isShow'>test</h1>
        </transition>
        <transition name="hello" appear>
            <h1 v-show='isShow'>test</h1>
        </transition>
    </div>  
</template>

<script>
    export default {
        name : "Test",
        data(){
            return {
                isShow:true
            }
        }
    }
</script>

<style scoped>

    h1{
        background-color: orange;
    }

    /* 没有名字的transition入场动画 */
    .v-enter-active{
        animation: testKeyFrames 0.9s linear;
    }

    /* 没有名字的transition离场动画 */
    .v-leave-active{
        animation: testKeyFrames 0.3s linear reverse;
    }

    /* 有名字是hello的transition入场动画 */
    .hello-enter-active{
        animation: testKeyFrames 1s linear;
    }

    /* 没有名字是hello的transition离场动画 */
    .hello-leave-active{
        animation: testKeyFrames 0.5s linear reverse;
    }

    

    @keyframes testKeyFrames {
        from{
            transform: translateX(-1000px);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>